<template>
    <div class="vd_cont" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="w_bg bd">
            <div class="pd_20">
                <div class="btn_list flexbox flexcenter flexjust">
                    <span class="ctn_btn" @click="switchTab('/videocountv2')">人员消耗</span>
                    <span class="ctn_btn active">项目消耗</span>
                </div>
                <div class="serch_box">
                    <el-input placeholder="请输入品牌名、产品名进行查询" v-model="queryInfo.query" @change="getDataList(1)" clearable class="input-with-select">
                        <el-button slot="append" @click="getDataList(1)">
                            <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M15.5259 13.8475L18.5054 16.8263C18.8311 17.1518 18.8311 17.6798 18.5055 18.0054C18.1799 18.331 17.652 18.331 17.3264 18.0053L14.3476 15.0258C13.0199 16.0901 11.3684 16.669 9.66675 16.6666C5.52675 16.6666 2.16675 13.3066 2.16675 9.16663C2.16675 5.02663 5.52675 1.66663 9.66675 1.66663C13.8067 1.66663 17.1667 5.02663 17.1667 9.16663C17.1692 10.8683 16.5903 12.5197 15.5259 13.8475ZM13.8542 13.2291C14.9118 12.1415 15.5025 10.6837 15.5001 9.16663C15.5001 5.94329 12.8892 3.33329 9.66675 3.33329C6.44341 3.33329 3.83341 5.94329 3.83341 9.16663C3.83341 12.3891 6.44341 15 9.66675 15C11.1838 15.0023 12.6417 14.4117 13.7292 13.3541L13.8542 13.2291Z" fill="white" />
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4999 9.16668C15.4999 5.94334 12.8891 3.33334 9.66655 3.33334C6.44322 3.33334 3.83322 5.94334 3.83322 9.16668C3.83322 12.3892 6.44322 15 9.66655 15C11.1836 15.0024 12.6415 14.4118 13.7291 13.3542L13.8541 13.2292C14.9116 12.1416 15.5023 10.6837 15.4999 9.16668ZM15.7924 13.8313L18.6466 16.6849C19.0504 17.0886 19.0504 17.7431 18.6467 18.1468C18.243 18.5506 17.5884 18.5505 17.1848 18.1468L14.3312 15.2925C12.9929 16.3148 11.3536 16.8691 9.66627 16.8667C5.41594 16.8665 1.96655 13.417 1.96655 9.16668C1.96655 4.91622 5.4161 1.46667 9.66655 1.46667C13.9169 1.46667 17.3664 4.91606 17.3666 9.16639M15.7924 13.8313C16.8146 12.4931 17.3689 10.8537 17.3666 9.16639Z" fill="white" />
                            </svg>
                        </el-button>
                    </el-input>
                </div>
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <el-radio-group v-model="queryInfo.channel" size="small" @change="getDataList(1)">
                            <el-radio-button label="1">千川</el-radio-button>
                            <el-radio-button label="2">UD</el-radio-button>
                            <el-radio-button label="3">巨量</el-radio-button>
                            <el-radio-button label="6">京易投</el-radio-button>
                            <!-- <el-radio-button label="4">腾讯</el-radio-button> -->
                        </el-radio-group>
                        <el-date-picker style="width:260px;margin-left:12px" :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="queryInfo.need_date" type="daterange" :clearable="false" size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <el-button plain size="small" class="plain_blue" @click="downloadFile">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" stroke='#4475FF' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            导出数据
                        </div>
                    </el-button>
                </div>
                <div class="met_tips">
                    <div :class="{'is_coll':!is_coll}">
                        <div class="tips_top flexbox flexcenter">
                            <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.3335 7.16683C13.3335 9.43606 11.9163 11.3743 9.91864 12.1447H8.00014H6.08164C4.08401 11.3743 2.66681 9.43606 2.66681 7.16683C2.66681 4.2213 5.05461 1.8335 8.00014 1.8335C10.9457 1.8335 13.3335 4.2213 13.3335 7.16683Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M9.91827 12.1445L9.6919 14.861C9.6775 15.0338 9.53307 15.1667 9.3597 15.1667H6.6398C6.46644 15.1667 6.322 15.0338 6.30764 14.861L6.08124 12.1445" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M5.59998 5.2998V8.4998L7.99998 6.8998L10.4 8.4998V5.2998" stroke="white" stroke-width="1.12" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            Tips
                        </div>
                        <p class="tips_text">该消耗数据包含千川、UD、巨量、京易投的数据。其中千川的数据来自千川分析，巨量的数据来自巨量引擎。</p>
                        <div class="tips_top flexbox flexcenter" style="margin-top:12px">
                            <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.66681 8.83333C4.66681 6.9924 6.15921 5.5 8.00014 5.5C9.84108 5.5 11.3335 6.9924 11.3335 8.83333V14.1667H4.66681V8.83333Z" fill="#FE6262" stroke="#FE6262" stroke-width="1.33333" stroke-linejoin="round" />
                                <path d="M8 2.1665V3.1665" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M11.9639 3.60938L11.3211 4.37543" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M14.0731 7.26221L13.0883 7.43587" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M1.92694 7.2627L2.91175 7.43633" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M4.03595 3.60938L4.67875 4.37543" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M2 14.1665H14.3333" stroke="#FE6262" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            Warning
                        </div>
                        <p class="tips_text">1、消耗数据（短视频消耗、直播消耗、总消耗）算的是在指定日期范围内产生的所有素材消耗，并非在日期范围内产出素材的消耗。比如日期取11月1号-11月20号，A素材生产在8月并且在11月有消耗，那么该A素材的消耗也纳入在其中。</p>
                        <p class="tips_text">2、项目消耗统计中：只统计本系统素材库中的素材消耗，不在素材库内的消耗也不会被计算进项目消耗中。千川和巨量通过素材ID关联，UD通过素材名称关联，京易投通过MD5值关联。</p>
                        <p class="tips_text">3、关于视频条数、卡审数、平均消耗：视频条数指的是在指定范围内生产出素材的中条数；卡审数是视频条数中卡审部分的数目；平均消耗=总消耗/视频条数。</p>
                        <p class="tips_text">4、项目消耗中，拍摄的消耗仅统计素材中有拍摄人的消耗，他们的消耗总量可能会比整个项目的消耗偏少。</p>
                        <p class="tips_text">5、2024年03月04日将京易投的数据纳入统计，并且关联项目内容PM、增加周期环比。周期根据本次时间跨度，计算出上个时间同样跨度的周期，举例本次时间为2024.03.01-03.03，则上个周期是2024.02.27-02.29。</p>
                    </div>
                    <div class="scoll_btl flexbox flexcenter flexjust" @click="isCollape">
                        <svg :class="{'svg_role':!is_coll}" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.0667 10.9331L7.98768 8.1331L4.93332 10.9331" stroke="#4475FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M11.0667 7.3335L7.98768 4.5335L4.93332 7.3335" stroke="#4475FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        {{is_coll?'收起内容':'展开内容'}}
                    </div>
                </div>
            </div>
            <div class="table_box">
                <el-table :data="tableData" class="com_table" height="700px" ref="straRef">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="nickname" label="项目" min-width="300">
                        <template slot-scope="scope">
                            <div v-html="getProName(scope.row)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="avg_cost" label="内容PM" width="140">
                        <template slot-scope="scope">
                            {{scope.row.cpm_name?scope.row.cpm_name:'无'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="avg_cost" label="平均消耗" width="140">
                        <template slot-scope="scope">
                            {{scope.row.avg_cost?scope.row.avg_cost:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="reject_num" label="卡审数" width="140">
                        <template slot-scope="scope">
                            {{scope.row.reject_num?scope.row.reject_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_num" label="视频条数" width="140">
                        <template slot-scope="scope">
                            {{scope.row.total_num?scope.row.total_num:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost_video" label="短视频消耗" width="140">
                        <template slot-scope="scope">
                            {{scope.row.stat_cost_video?scope.row.stat_cost_video:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost_live" label="直播消耗" width="140">
                        <template slot-scope="scope">
                            {{scope.row.stat_cost_live?scope.row.stat_cost_live:'0'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="总消耗" width="180">
                        <template slot-scope="scope">
                            <span class="cost_font">{{scope.row.stat_cost?scope.row.stat_cost:'0'}}</span>
                            <div class="cost_ratio">
                                <div>较上周期</div>
                                <div class="ratio" style="color: #00C271;" v-if="costrate(scope.row.stat_cost_rate) == 'dow'">
                                    <img src="../../assets/img/decline.svg"/> <span> {{ (scope.row.stat_cost_rate * 100).toFixed(2) }}%</span>
                                </div>
                                <div class="ratio" style="color: #FE6262;" v-else-if="costrate(scope.row.stat_cost_rate) == 'up'">
                                    <img src="../../assets/img/rise.svg"/> <span> {{ (scope.row.stat_cost_rate * 100).toFixed(2) }}%</span>
                                </div>
                                <div class="ratio" v-else>——</div>
                        </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="操作" width="100" fixed="right">
                        <template slot-scope="scope">
                            <el-link type="primary" :underline="false" @click="toDetails(scope.row)">项目人员</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import downLoad from "../../excel/ExportDown";
export default {
    name: "",
    data() {
        return {
            is_coll:false,
            loading: false,
            queryInfo: {
                need_date: [],
                channel : 1,
                order: "desc",
                query: "",
                page:1,
                limit:20,
            },
            total: 1,
            setpage: 1,
            tableData: [],
            pickerOptions: {
                disabledDate(time) {
                    let dateTime = new Date();
                    let nowTime =
                        dateTime.getHours() * 60 + dateTime.getMinutes();
                    if (nowTime > 740) {
                        return time.getTime() > Date.now() - 8.64e7;
                    } else {
                        return time.getTime() > Date.now() - 8.64e7 - 8.64e7;
                    }
                },
            },
        };
    },
    created() {
        this.getTimeFn();
        this.getDataList(1);
    },
    computed: {
        costrate(){
            return (data) => {
                if(data == 0){
                 return '-'
                }else if(data > 0){
                 return 'up'
                }else{
                 return 'dow'
                }
            }
        }
    },
    methods: {
        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            that.queryInfo.need_date[0] = that.formatDate(start);
            that.queryInfo.need_date[1] = that.formatDate(end);
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return myyear + "-" + mymonth + "-" + myweekday;
        },

        changeType(type) {
            this.queryInfo.job = type;
            this.getDataList();
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "/adminapi/materialv2/projectData",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        async downloadFile() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "/adminapi/materialv2/projectData",
                {
                    need_date: this.queryInfo.need_date,
                    channel : this.queryInfo.channel,
                    order: this.queryInfo.order,
                    query: this.queryInfo.query,
                    page:1,
                    limit:0,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                for(let i in res.data.list){
                    if(res.data.list[i].area==1){
                        res.data.list[i].areaName='深圳'
                    }else{
                        res.data.list[i].areaName='杭州'
                    }
                    if(res.data.list[i].business_scene==1){
                        res.data.list[i].sceneName='短视频原创'
                    }else if(res.data.list[i].business_scene==2){
                        res.data.list[i].sceneName='短视频混剪'
                    }else if(res.data.list[i].business_scene==3){
                        res.data.list[i].sceneName='直播素材'
                    }else if(res.data.list[i].business_scene==4){
                        res.data.list[i].sceneName='直播直投'
                    }else if(res.data.list[i].business_scene==5){
                        res.data.list[i].sceneName='短视频'
                    }else if(res.data.list[i].business_scene==6){
                        res.data.list[i].sceneName='直播'
                    }
                }
                var excelDatas = [
                    {
                        tHeader: ["品牌", "产品", "业务场景", "地区","内容PM","平均消耗","卡审数","视频条数","短视频消耗","直播消耗","总消耗","总消耗比例"],
                        filterVal: [
                            "brand_name",
                            "product_name",
                            "sceneName",
                            "areaName",
                            "cpm_name",
                            "avg_cost",
                            "reject_num",
                            "total_num",
                            "stat_cost_video",
                            "stat_cost_live",
                            "stat_cost",
                            "stat_cost_rate"
                        ],
                        tableDatas: res.data.list.map(record => ({
                            ...record,
                            stat_cost_rate: `${(record.stat_cost_rate * 100).toFixed(2)}%`,
                        })),
                        sheetName: "项目消耗",
                    },
                ];
                downLoad(excelDatas, "项目消耗");
            }
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        toDetails(row){
            let routeUrl = this.$router.resolve({
                path: "/projectdetailsv2",
                query: {
                    need_date:this.queryInfo.need_date,
                    channel:this.queryInfo.channel,
                    brand_name:row.brand_name,
                    product_name:row.product_name,
                    business_scene:row.business_scene,
                    area:row.area,
                },
            });
            window.open(routeUrl.href, "_blank");
        },

        getProName(row){
            let brand = row.brand_name
            let product = row.product_name
            let area = ''
            let scene = ''
            if(row.business_scene==1){
                scene = '短视频原创'
            }else if(row.business_scene==2){
                scene = '短视频混剪'
            }else if(row.business_scene==3){
                scene = '直播素材'
            }else if(row.business_scene==4){
                scene = '直播直投'
            }else if(row.business_scene==5){
                scene = '短视频'
            }else if(row.business_scene==6){
                scene = '直播'
            }

            if(row.area==1){
                area = '深圳'
            }else if(row.area==2){
                area = '杭州'
            }
            
            return `<span style="font-weight:bold">${brand}</span> / ${product} / ${scene} / ${area}` 
        },

        // 展开提示
        isCollape(){
            this.is_coll = !this.is_coll
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.cost_ratio{
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #B4B7BD;
}
.ratio{
    padding-left: 8px;
    display: flex;
}
.ratio img{
    padding-top: 2px;
    padding-right: 2px;
    width: 16px;
    height: 16px;
}
.table_box {
    padding-top: 0;
}
.btn_list {
    text-align: center;
}
.ctn_btn {
    font-size: 14px;
    color: #17233d;
    padding: 0 24px;
    line-height: 28px;
    border-radius: 30px;
    cursor: pointer;
}
.ctn_btn.active {
    color: #fff;
    background: #4475ff;
}
.serch_box {
    width: 430px;
    margin: 30px auto 34px;
}
.cost_font {
    font-family: "DINPro";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #17233d;
}
.name_head {
    width: 28px;
    height: 28px;
    line-height: 28px;
    background-color: #4475ff;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border-radius: 50%;
    margin-right: 12px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.rank_img {
    display: block;
    margin: 0 auto;
}
.vd_cont {
    height: 100%;
    margin: -12px;
    padding: 12px;
    overflow-y: auto;
}
.met_tips {
    background: rgba(68, 117, 255, 0.03);
    border-radius: 2px;
    margin-top: 20px;
    padding: 12px 20px;
}
.tips_top {
    font-size: 12px;
    font-weight: bold;
}
.tips_top svg {
    margin-right: 8px;
}
.tips_text {
    font-size: 12px;
    color: #616c85;
    line-height: 16px;
    margin-top: 8px;
}
.scoll_btl {
    width: 100px;
    height: 32px;
    font-size: 12px;
    color: #4475ff;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 2px;
    cursor: pointer;
    margin-top: 12px;
}
.scoll_btl svg{
    margin-right: 5px;
}
.is_coll{
    height:95px;
    overflow: hidden;
}
.svg_role{
    transform: rotate(180deg);
}
</style>
<style>
.serch_box .el-input__inner {
    border: 2px solid #4475ff;
}
.serch_box .el-input-group__append,
.serch_box .el-input-group__prepend {
    background-color: #4475ff;
    border: 1px solid #4475ff;
}
.serch_box .el-button {
    padding: 10px 15px;
}
</style>


